<template>
  <div class="searchCourse">
    <div class="title">课程管理</div>
    <div class="searchBox">
      <div class="inputBox">
        输入搜索<el-input
          v-model="search"
          clearable
          placeholder="请输入课程ID"
          size="small"
        ></el-input>
      </div>
      <div class="dateBox">
        上次消费时间
        <el-date-picker
          size="small"
          v-model="value1"
          type="date"
          placeholder="开始日期"
          ><i></i
        ></el-date-picker>
        <span> — </span>
        <el-date-picker
          size="small"
          v-model="value2"
          type="date"
          placeholder="结束日期"
          ><i></i
        ></el-date-picker>
      </div>
      <div class="btns">
        <el-button size="small" type="primary" @click="searchFunBtn"
          >查询</el-button
        >
        <el-button size="small" @click="resetFunBtn">重置</el-button>
      </div>
      <el-dropdown trigger="click">
        <span class="el-dropdown-link" @click="changeStyle">
          <i class="el-icon-d-arrow-right"></i> 高级筛选
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            ><label><input type="checkbox" /> 上架</label></el-dropdown-item
          >
          <el-dropdown-item
            ><label><input type="checkbox" /> 下架</label></el-dropdown-item
          >
          <el-dropdown-item
            ><label><input type="checkbox" /> 上传人</label></el-dropdown-item
          >
          <el-dropdown-item
            ><label><input type="checkbox" /> 课程名称</label></el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      search: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      value1: "",
      value2: "",
      flag: true,
    };
  },
  methods: {
    searchFunBtn() {
      this.$emit("searchParent", this.search);
    },
    resetFunBtn() {
      this.search = "";
      this.$emit("searchParent", this.search);
    },
    changeStyle() {
      let changeColor = document.querySelector(".el-dropdown-link");
      if (this.flag) {
        changeColor.style.color = "#438afe";
      } else {
        changeColor.style.color = "#333";
      }
      this.flag = !this.flag;
    },
  },
};
</script>

<style lang='less' scoped>
.searchCourse {
  min-width: 1205px;
  max-width: 1365px;
  margin: 0 auto;

  .title {
    height: 60px;
    line-height: 60px;
    font-size: 20px;
    padding-left: 14px;
    position: relative;
    text-align: left;

    &::before {
      content: "";
      width: 5px;
      height: 20px;
      background: #248bfe;
      position: absolute;
      top: 20px;
      left: 0;
    }
  }

  .searchBox {
    height: 64px;
    line-height: 64px;
    background: #fff;
    font-size: 16px;
    font-weight: bold;

    // 输入框
    .inputBox {
      margin-right: 30px;
      padding-left: 30px;
      float: left;

      .el-input {
        width: 130px;
        height: 32px;
        margin-left: 8px;
      }
    }

    // 日期选择器
    .dateBox {
      float: left;
      margin-right: 30px;

      /deep/.el-input {
        width: 130px;
        margin-left: 3px;
        margin-right: 2px;

        .el-input__prefix {
          display: none;
        }
      }

      span {
        color: #eef1f5;
      }
    }

    // 查询、重置按钮
    .btns {
      float: left;
      margin-right: 30px;

      .el-button {
        padding: 8px 24px;
      }
    }

    // 高级筛选
    .el-dropdown {
      float: left;
      color: #333;
      cursor: pointer;

      .el-dropdown-link {
        i {
          transform: rotate(90deg);
        }
      }
    }
  }
}
</style>